<template>
  <div class="page">
    <div class="left" @click="handlePages('left')">
      <img src="@/assets/icon/zuo.png" alt="" />
    </div>
    <div
      v-for="(page, num) in pages"
      :key="num"
      @click="handlePages(page)"
      :class="{ page_index: true, 'active-div': page == index}">
      {{ page }}
    </div>
    <div class="right" @click="handlePages('right')">
      <img src="@/assets/icon/you.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "PageCom",
  data() {
    return {
      //存储当前点击的数字
      index: 1,
    };
  },
  methods: {
    handlePages(item) {
      // console.log(item,"当前点击")
      if (item == "left") {
        if (this.index < 2) {
          this.index = 5;
          this.$emit("back", this.index);
        } else {
          this.index--;
          this.$emit("back", this.index);
        }
      } else if (item == "right") {
        if (this.index > 4) {
          this.index = 1;
          this.$emit("back", this.index);
        } else {
          this.index++;
          this.$emit("back", this.index);
        }
      } else {
        this.index = item;
        this.$emit("back", this.index);
      }
    },
  },
  props: {
    pages: {
      type: Array,
    },
    pageSize: {
      type: Number,
    },
    pageNumber: {
      type: Number,
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-radius: 5px;
  border: #ccc solid 1px;
  div {
    border-left: #ccc solid 1px;
    color: #4e4e4e;
  }
  .active-div {
    color: blue;
  }
  div:hover {
    background-color: #eee;
  }
  .left {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0 0 5px;
    img {
      width: 15px;
    }
  }
  .page_index {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 5px 5px 0;
    img {
      width: 15px;
    }
  }
}
</style>